<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="就诊人信息"></dawnBar>
		<view class="page-container">
			<view v-if="resultData.id">
				<view class="tn-bg-white dawn-shadow tn-padding dawn-radius tn-margin-top-sm">
					<view class="list-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-my-fill"></text>
							<view class="list__left__text">姓名</view>
						</view>
						<view class="list__right list-text__right">
							{{ resultData.name || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-identity-fill"></text>
							<view class="list__left__text">身份证</view>
						</view>
						<view class="list__right list-text__right">
							{{ resultData.cardNo || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-image-text-fill"></text>
							<view class="list__left__text">病人ID</view>
						</view>
						<view class="list__right list-text__right">
							{{ resultData.patientId || '' }}
							<text class="tn-icon-qr-beibei tn-color-dawn tn-padding-left-ss"></text>
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-expand"></text>
							<view class="list__left__text">门诊号</view>
						</view>
						<view class="list__right list-text__right">
							{{ resultData.clinicNo || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-font"></text>
							<view class="list__left__text">电子健康卡</view>
						</view>
						<view class="list__right list-text__right">
							{{ strMask(resultData.ehealthCardId)  || '' }}
							<text class="tn-icon-right tn-padding-left-ss"></text>
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-sex"></text>
							<view class="list__left__text">性别</view>
						</view>
						<view class="list__right list-text__right">
							{{ resultData.patientSex || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-time-fill"></text>
							<view class="list__left__text">年龄</view>
						</view>
						<view class="list__right list-text__right">
							{{ resultData.patientAge || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-module-fill"></text>
							<view class="list__left__text">民族</view>
						</view>
						<view class="list__right list-text__right">
							{{ resultData.nation || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-calendar-fill"></text>
							<view class="list__left__text">出生日期</view>
						</view>
						<view class="list__right list-text__right">
							{{ resultData.birthday || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-map-fill"></text>
							<view class="list__left__text">地址</view>
						</view>
						<view class="list__right list-text__right">
							{{ resultData.address || '' }}
						</view>
					</view>
				</view>
				
				<view class="tn-width-full tn-margin-top-xl">
					<!-- <view class="tn-flex tn-flex-row-center tn-flex-col-center">
						<view>
							<text class="tn-text-lg tn-text-bold">就诊码</text>
						</view>
					</view> -->
					<view>
						<view class="tn-flex tn-flex-row-center">
							<image class="qrcode" src="/static/images/qrcode.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-margin-top">
						<view>
							<text class="tn-text-lg">病人ID：{{ resultData.patientId }}</text>
						</view>
					</view>
					<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-margin-top">
						<view>
							<text class="tn-text-lg" style="color: #626060;">医院就诊时，扫码识别身份</text>
						</view>
					</view>
				</view>

				<!-- 悬浮按钮-->
				<view class="tn-flex tn-footerfixed">
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
						<tn-button @click="navDel(resultData)" class="dawn-btn-lg dawn-btn-sm__danger">
							<text class="tn-icon-delete-fill tn-padding-right-xs"></text>
							<text>解 绑</text>
						</tn-button>
					</view>
				</view>

			</view>
			<view v-if="show">
				<dawnMsg :msg="msg"></dawnMsg>
			</view>
		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as PatientApi from '@/api/hospital/patient.js';
	import * as PayApi from "@/api/hospital/pay.js";
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'detail',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				loading: false,
				show: false,
				msg: '',
				queryData: {
					pageSize: 10,
					pageNo: 1,
					patientId: '',
					patientName: '',
					id:0
				},
				resultData: {}
			}
		},
		onLoad(options) {
			if (!this.isLogin) {
				toLogin();
				return;
			} else {
				// if (options.hasOwnProperty('itemId')) {
				// 	this.queryData.id = options.itemId;
				// }
				let obj = this.$util.getStorageData(config.STORE_KEY.P_DETAIL);
				this.queryData.id = obj.itemId;
				this.getData();
			}
		},
		methods: {
			search(result) {
				if (result.code === 0) {
					this.queryData = result.data;
					this.queryData.pageNo = 1;
					this.queryData.pageSize = this.$refs.pagination.pageSize;
					this.getPage();
				}
			},
			getData: function() {
				let that = this;
				this.loading = true;
				this.show = false;
				this.queryData.patientId = this.userInfo.id;
				this.queryData.patientName = this.userInfo.nickname;
				PatientApi.detail(this.queryData).then(res => {
					this.loading = false;
					console.table(res);
					if (res.code === 0) {
						this.$set(this, 'resultData', res.data);
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			navDel(item) {
				let that = this;
				uni.showModal({
					title: '系统提示',
					content: '请确认是否要解绑?',
					success: function(res) {
						if (res.confirm) {
							that.navDelConfirm(item);
						} else if (res.cancel) {
							// console.log('取消');
							//TODO
						}
					}
				});
			},
			navDelConfirm(item) {
				let that = this;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = 'popup';
				const cancelData = new Object();
				cancelData.patientId = item.patientId;
				cancelData.patientName = item.name;
				cancelData.id = item.id;
				PatientApi.del(cancelData).then(res => {
					that.loading = false;
					console.table(res);
					if (res.code === 0) {
						that.$util.Tips({
							title: '解绑档案成功'
						});
						uni.navigateTo({
							url: '/hosp/patient/list'
						})
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					that.loading = false;
					that.show = true;
					that.msg = err.message;
				})
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			fen2yuan(price) {
				return this.$util.fen2yuan(price)
			},
			strMask(str) {
				return this.$util.strMask(str,6);
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx 0rpx !important;
		border-bottom: 1px solid $dawn-theme-color-light;

		&__right {
			font-size: $dawn-font-size-md;
		}
	}

	.list-icon-text,
	.list-image-text {
		padding: 15rpx 20rpx;
		border-bottom: 1px solid $dawn-theme-color-light;
	}

	.list {
		font-size: 14px;

		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 10rpx;
			}

			&__image {
				margin-right: 18rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.qrcode {
		width: 300rpx;
		height: 300rpx;
		border-radius: 10rpx;
	}
</style>